<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="企划月份" class="myform-item">
          <el-select v-model="form.pid" placeholder="请选择" clearable>
            <el-option
              v-for="item in layoutlist"
              :key="item.id"
              :label="item.date"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计师" class="myform-item">
          <el-input
            v-model="form.name"
            placeholder="请输入设计师"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="套装名" class="myform-item">
          <el-input
            v-model="form.title"
            placeholder="请输入套装名"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 50px">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="套名" align="center" prop="title" width="200px">
        <template slot-scope="{ row }">
          <div>{{ row.title }}</div>
          <div style="font-size: 12px; color: #999" v-if="row.category_title">
            品类:{{ row.category_title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" prop="img" width="150px">
        <template slot-scope="{ row }">
          <el-image
            :src="row.img"
            fit="fill"
            v-if="row.img"
            :preview-src-list="[row.img]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="设计师"
        align="center"
        prop="username"
        width="150px"
      >
        <template slot-scope="{ row }">
          <div>
            <el-image
              :src="row.avatarurl"
              fit="fill"
              style="width: 100px"
              :preview-src-list="[row.avatarurl]"
            ></el-image>
          </div>
          <div>
            {{ row.username }} {{ row.nickname ? `(${row.nickname})` : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="进度" align="center" prop="steplist">
        <template slot-scope="{ row }">
          <div style="padding: 20px 0">
            <el-steps
              :space="200"
              :active="row.speed"
              align-center
              style="margin-bottom: 20px"
            >
              <el-step
                :title="item.name"
                v-for="(item, index) in row.steplist"
                :key="index"
                :class="
                  (item.key == Number(row.speed) + 1 ||
                    item.key == Number(row.speed)) &&
                  item.key != 1
                    ? 'pointer'
                    : ''
                "
                @click.native="onEdit(row, item.key, item.name)"
                :description="item.time.substring(0,10)"
              ></el-step>
            </el-steps>
            <el-progress
              style="padding: 0 20px"
              :text-inside="true"
              :stroke-width="18"
              :percentage="
                parseInt(
                  ((Number(row.speed) - 1) / (Number(row.length) - 1)) * 100
                ) || 0
              "
            ></el-progress>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminApiGetsuitlistspeed"
    />
  </div>
</template>

<script>
import {
  postAdminApiGetsuitlistspeed,
  postApigetplanning,
  postAdminApiSetsuitlistspeed,
  postAdminApiSetrevokespeed,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      layoutlist: [],
      qxobj: {},
      form: {
        name: "",
        pid: "",
        title: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
    };
  },
  activated() {
    let form = this.form;
    this.qxobj = JSON.parse(this.$route.query.qxobj);
    this.postAdminApiGetsuitlistspeed(form);
    this.postApigetplanning();
  },
  methods: {
    // 编辑
    onEdit(row, key, name) {
      let that = this;
      if (this.qxobj.save) {
        if (key == Number(row.speed) + 1) {
          let obj = {
            id: row.id,
            j_id: row.j_id,
            key,
          };
          this.$confirm(`确定完成 ${name} ?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              postAdminApiSetsuitlistspeed(obj).then((res) => {
                let form = that.form;
                that.postAdminApiGetsuitlistspeed(form);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
        } else if (key == Number(row.speed) && key != 1) {
          let obj = {
            id: row.id,
            j_id: row.j_id,
            key,
          };
          this.$confirm(`确定撤销 ${name} ?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              postAdminApiSetrevokespeed(obj).then((res) => {
                let form = that.form;
                that.postAdminApiGetsuitlistspeed(form);
                this.$message({
                  type: "success",
                  message: "撤销成功!",
                });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消撤销",
              });
            });
        }
      }
    },
    // 企划
    postApigetplanning() {
      postApigetplanning().then((res) => {
        this.layoutlist = res.data;
      });
    },
    // 采购列表
    async postAdminApiGetsuitlistspeed(data) {
      this.loading = true;
      this.form = data;
      postAdminApiGetsuitlistspeed(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      console.log("this.form", this.form);
      this.postAdminApiGetsuitlistspeed(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
